<template>
	<view class="home">
		<view class="topnav">
			<u-tabs :list="navlist" :activeStyle="{
				color:'#333',
				fontWeight:'bold',
				transform:'scale(1.08)'
			}" :inactiveStyle="{
				color:'#888',
				transform:'scale(1)'
			}" @click="clickNav"></u-tabs>
		</view>

		<view class="loadingState" v-show="loadState">
			<u-skeleton rows="4" title loading></u-skeleton>
		</view>

		<view class="content">
			<view class="item" v-for="item in dataList">
				<blog-item @delEvent="P_delEvent" :item="item" :isLike.sync="item.isLike" :like_count.sync="item.like_count"></blog-item>
			</view>
		</view>
		
		<view>
			<uni-load-more :status="uniLoad"></uni-load-more>
		</view>

		<view class="edit" @click="goEdit">
			<text class="iconfont icon-a-21-xiugai"></text>
		</view>
	</view>
</template>

<script>
	import{
		store,mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database()
	const dbCmd = db.command
	export default {
		data() {
			return {
				uniLoad:'more',
				noMore:false,
				navlist: [{
					name: "最新",
					type: "publish_date"
				}, {
					name: "热门",
					type: "view_count"
				}],
				dataList: [],
				navAction: 0,
				loadState: true
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.uniLoad = 'loading'
			if(this.noMore){
				return this.uniLoad = "noMore"
				
			}
			this.getData()
		},
		methods: {
			P_delEvent(){
				// this.dataList = []
				this.getData()
			},
			//获取网络列表
		  async	getData() {
				let artTemp = db.collection("quanzi_article").where(`delState != true`).field(
						"title,user_id,description,picurls,comment_count,like_count,view_count,province,publish_date")
					.getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
				db.collection(artTemp, userTemp).orderBy(this.navlist[this.navAction].type, "desc")
				.skip(this.dataList.length).limit(5).get()
				.then(async res => {
					let idArr=[]
					let oldArr = this.dataList
					if(res.result.data.length == 0){
						this.noMore = true
						this.loadState = "noMore"
					}
					let resDataArr = [...this.dataList,...res.result.data]
					if(store.hasLogin){
						resDataArr.forEach(item=>{
							idArr.push(item._id)
						})
						let likeRes = await db.collection("quanzi_like").where({
							article_id:dbCmd.in(idArr),
							user_id:uniCloud.getCurrentUserInfo().uid
						}).get()
					
						
						
						likeRes.result.data.forEach(item=>{
							let findIndex = resDataArr.findIndex(find=>{
								return item.article_id == find._id
							})
							resDataArr[findIndex].isLike = true
						})
					}

					
					this.dataList = resDataArr
					this.loadState = false
				})

			},
			clickNav(e) {
				this.loadState = true
				this.dataList = [];
				this.uniLoad = "more"
				this.navAction = e.index;
				this.noMore = false
				this.getData()

			},
			//跳转至编辑页面
			goEdit() {
				uni.navigateTo({
					url: "/pages/edit/edit"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.topnav {
			margin-bottom: 30rpx;
		}

		.loadingState {
			padding: 30rpx;
		}

		.content {
			.item {
				padding: 30rpx;
				border-bottom: #F7F7F7 15rpx solid;
			}
		}

		.edit {
			width: 120rpx;
			height: 120rpx;
			background: #0199FE;
			border-radius: 50%;
			color: #fff;
			position: fixed;
			z-index: 100;
			bottom: 150rpx;
			right: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8);

			.iconfont {
				font-size: 50rpx
			}
		}
	}
</style>